<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title th:text="${session.language['data-title']}"></title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link href="../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="../static/css/font-awesome.css?v=4.4.0" rel="stylesheet"/>

    <!-- Data Tables -->
    <link href="../static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"/>
    <link href="../static/css/animate.css" rel="stylesheet"/>
    <link href="../static/css/style.css?v=4.1.0" rel="stylesheet"/>
    <link href="../static/css/plugins/switchery/switchery.css" rel="stylesheet"/>
    <link href="../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-sm-12">
        <h2 th:text="${session.language['data-title']}"></h2>
        <ol class="breadcrumb">
            <li>
                <span th:text="${session.language['manage-title']}"></span>
            </li>
            <li>
                <strong th:text="${session.language['data-title']}"></strong>
            </li>
        </ol>
    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${session.language['data-title']}"></h5>
                </div>
                <div class="ibox-content">
                    <a href="/config-edit/add">
                        <button class="btn btn-info" type="button">
                            <i class="fa fa-paste"></i>
                            <span th:text="${session.language['add']}"></span>
                        </button>
                    </a>
                    <br/>
                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th th:text="${session.language['key-title']}"></th>
                            <th th:text="${session.language['status-title']}"></th>
                            <th th:text="${session.language['application-id']}"></th>
                            <th th:text="${session.language['config-id']}"></th>
                            <th th:text="${session.language['update-at-title']}"></th>
                            <th th:text="${session.language['value-title']}"></th>
                            <th th:text="${session.language['operation']}"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:if="${#lists.isEmpty(configs)}">
                            <td colspan="3" style="color: gray" th:text="${session.language['no-record']}"></td>
                        </tr>
                        <tr class="gradeX" th:each="config : ${configs}">
                            <td th:text="${config.dataConfig.key}"></td>
                            <td th:switch="${config.dataConfig.status}">
                                <button class="btn btn-danger btn-xs btn-rounded" th:case="'0'" style="border: none" th:text="${session.language['disable']}"></button>
                                <button class="btn btn-primary btn-xs btn-rounded" th:case="'1'" style="border: none; background-color: #1AB394" th:text="${session.language['enable']}"></button>
                            </td>
                            <td th:text="${config.metaConfig.application}"></td>
                            <td th:text="${config.metaConfig.config}"></td>
                            <td th:text="${#dates.format(config.dataConfig.updateAt, 'yyyy-MM-dd HH:mm:ss')}"></td>
                            <td th:text="${config.dataConfig.value}"></td>
                            <td>
                                <a th:href="@{config-edit/edit(key=${config.dataConfig.key})}">
                                    <button class="btn btn-success btn-xs" type="button"
                                            style="background-color: #1AB394">
                                        <i class="fa fa-plus"></i>
                                        <span th:text="${session.language['edit']}"></span>
                                    </button>
                                </a>
                                <button class="btn btn-info btn-xs view" type="button"
                                        th:attr="data-key=${config.dataConfig.key},
                                        data-node=${config.metaConfig.node},
                                        data-environment=${config.metaConfig.environment},
                                        data-application=${config.metaConfig.application},
                                        data-config=${config.metaConfig.config},
                                        data-version=${config.metaConfig.version}">
                                    <i class="fa fa-eye"></i>
                                    <span th:text="${session.language['view']}"></span>
                                </button>
                                <button class="btn btn-danger btn-xs delete" type="button"
                                        th:attr="data-key=${config.dataConfig.key}">
                                    <i class="fa fa-trash-o"></i>
                                    <span th:text="${session.language['delete']}"></span>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="../static/js/jquery.min.js?v=2.1.4"></script>
<script src="../static/js/bootstrap.min.js?v=3.3.6"></script>

<script src="../static/js/plugins/jeditable/jquery.jeditable.js"></script>

<!-- Data Tables -->
<script src="../static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="../static/js/plugins/dataTables/dataTables.bootstrap.js"></script>

<script src="../static/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="../static/js/plugins/switchery/switchery.js"></script>
<script src="../static/js/plugins/cropper/cropper.min.js"></script>

<!-- Bootstrap table -->
<script src="../static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="../static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="../static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Sweet alert -->
<link href="../static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"/>
<script src="../static/js/plugins/sweetalert/sweetalert.min.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        function formatDate(sj) {
            var now = new Date(sj);
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var date = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
        }

        $('.view').click(function () {
            /*<![CDATA[*/
            var viewTitle = [[${session.language['data-title']}]] + " " + [[${session.language['view']}]];

            var keyTitle = [[${session.language['key-title']}]];
            var nodeIdTitle = [[${session.language['node-id']}]];
            var envIdTitle = [[${session.language['env-id']}]];
            var applicationIdTitle = [[${session.language['application-id']}]];
            var configIdTitle = [[${session.language['config-id']}]];
            var versionIdTitle = [[${session.language['version-id']}]];

            var statusTitle = [[${session.language['status-title']}]];
            var valueTitle = [[${session.language['value-title']}]];
            var introduceTitle = [[${session.language['introduce-title']}]];
            var createByTitle = [[${session.language['create-by-title']}]];
            var createAtTitle = [[${session.language['create-at-title']}]];
            var updateByTitle = [[${session.language['update-by-title']}]];
            var updateAtTitle = [[${session.language['update-at-title']}]];
            /*]]>*/

            var key = $(this).data("key");
            var node = $(this).data("node");
            var environment = $(this).data("environment");
            var application = $(this).data("application");
            var config = $(this).data("config");
            var version = $(this).data("version");
            $.ajax({
                url: "query-data-config",
                type: "GET",
                data: {
                    key: key,
                    node: node,
                    environment: environment,
                    application: application,
                    config: config,
                    version: version
                },
                dataType: "json",
                success: function (data) {
                    swal({
                        title: viewTitle,
                        text:
                        '<table border="0px" width="100%">' +
                        '<tr><td align="right">' + keyTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.dataConfig.key + '</span></td></tr>' +
                        '<tr><td align="right">' + nodeIdTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.metaConfig.node + '</span></td></tr>' +
                        '<tr><td align="right">' + envIdTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.metaConfig.environment + '</span></td></tr>' +
                        '<tr><td align="right">' + applicationIdTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.metaConfig.application + '</span></td></tr>' +
                        '<tr><td align="right">' + configIdTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.metaConfig.config + '</span></td></tr>' +
                        '<tr><td align="right">' + versionIdTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.metaConfig.version + '</span></td></tr>' +
                        '<tr><td align="right">' + statusTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.dataConfig.status + '</span></td></tr>' +
                        '<tr><td align="right">' + valueTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.dataConfig.value + '</span></td></tr>' +
                        '<tr><td align="right">' + introduceTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.dataConfig.introduce + '</span></td></tr>' +
                        '<tr><td align="right">' + createByTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.dataConfig.createBy + '</span></td></tr>' +
                        '<tr><td align="right">' + createAtTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + formatDate(data.dataConfig.createAt) + '</span></td></tr>' +
                        '<tr><td align="right">' + updateByTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + data.dataConfig.updateBy + '</span></td></tr>' +
                        '<tr><td align="right">' + updateAtTitle + '</td><td>：</td><td align="left"><span style="color: #c7264e;background-color: #f9f2f4;">' + formatDate(data.dataConfig.updateAt) + '</span></td></tr>' +
                        '</table>',
                        html: true
                    });
                },
                error: function (e) {
                    var m = e.responseJSON;
                    swal("Error", "[" + m.status + " - " + m.error + "] " + m.message, "error");
                }
            });
        });

        $('.delete').click(function () {
            /*<![CDATA[*/
            var nodeId = [[${session.language['node-id']}]];

            var deleteTitle = [[${session.language['delete-title']}]];
            var deleteTip = [[${session.language['delete-tip']}]];
            var deleteName = [[${session.language['delete-name']}]];

            var deleteSuccess = [[${session.language['delete-success']}]];
            var deleteSuccessTip = [[${session.language['delete-success-tip']}]];
            var deleteFailure = [[${session.language['delete-failure']}]];
            var deleteFailureTip = [[${session.language['delete-failure-tip']}]];
            /*]]>*/

            var id = $(this).data("node-id");
            swal({
                title: deleteTitle,
                text: nodeId + "：" + id + "<br/>" + deleteTip,
                type: "warning",
                html: true,
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: deleteName,
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    url: "config/" + id,
                    type: "delete",
                    dataType: "json",
                    success: function (data) {
                        if (data) {
                            swal(deleteSuccess, deleteSuccessTip, "success");
                        } else {
                            swal(deleteFailure, deleteFailureTip, "error");
                        }
                        // window.location.reload();
                    },
                    error: function (e) {
                        var m = e.responseJSON;
                        swal(deleteFailure, "[" + m.status + " - " + m.error + "] " + m.message, "error");
                    }
                });
            });
        });
    });
</script>
</body>
</html>